<template>
	<view class=" ">
		<view class='issue'>
			<view class="issue-head">
				<text class="issue-head-title">点击星星评分：</text>
				
				<view class="issue-head-star-box" >
					<!-- <image v-for="(item,index) in 5" :key="index" :src="starDefault" mode=""></image> -->
					<image v-for="(item,index) in 5" :key="index" :src="(index+1)>formatScore?starDefault:starActive" :class="formatScore==index+1?'active':''" mode="" @click="setScore(index+1)"></image>
				</view>
			</view>
			 <textarea  @blur="blur" :value="infoReceive.textareaValue" :placeholder="textareaPlaceholder"/>
		</view>
		<view class="button " >
			提交
		</view>
	</view>
</template>

<script>
	import wIcon from '@/components/w-icon.vue'
	export default{
		components:{
			wIcon,
		},
		data() {
			return {
				imgUrl:this.imgUrl,
				infoReceive:{
					score:0,
					textareaValue:""
				},
				textareaPlaceholder:"请输入您的评价",
				starDefault:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/st_star.png",
				starActive:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/st_star_active.png"
			}
		},
		 computed:{
		 	formatScore(){
		 		return this.infoReceive.score
		 	}
		 },
		onLoad() {
		
		},
		
		methods: {
			setScore(score){
				this.infoReceive.score=score
				// this.$emit("scoreChange",score)
			},
			blur(e){
				this.infoReceive.textareaValue=e.detail.value
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page{background: #fff;}
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;
	$fontSize:28upx;
	
	.issue {
		background-color: $backgroundC;
		&-head{
			background-color: $white;
			height: 100upx;
			border-top: 1upx solid $borderColor;
			border-bottom: 1upx solid $borderColor;
			padding: 0 25upx;
			
			&-pic{
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 17upx;
			}
			&-title{
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}
			
			&-star-box{
				display: inline-block;
				
				image{
					width: 32upx;
					height: 32upx;
					vertical-align: middle;
					margin-right: 14upx;
				}
				image.active{
					animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
				}
			}
		}
		textarea{
			width: 100%;
			height: 420upx;
			background-color: $white;
			font-size: $fontSize;
			color: #898989;
			padding: 24upx;
			box-sizing: border-box;
			line-height: 40upx
		}
		
	}
	
	@keyframes star_move{
		from{
			width: 50upx;
			height: 50upx;
			transform: rotate(180deg)
		}
		to{
			width: 32upx;
			height: 32upx;
			transform: rotate(0)
		}
	}
	@keyframes star_rotate{
		0%{
			transform: rotateY(360deg)
		}
		100%{
			transform: rotateY(180deg)
		}
	}
	.button{
		position: absolute;bottom: 50rpx;left: 64rpx;
	}
</style>